<template>
  <div>
    <el-card>
      <div slot="header" class="title">
        <span>{{title}}</span>
        <el-button style="float: right;" type="default" icon="arrow-left"size="small" @click="back()">返回</el-button>
      </div>
      <div>
        <slot name="filters"></slot>
      </div>
      <div v-loading.body="loading">
        <slot name="items"></slot>
      </div>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentPageChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total_items">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
  .title {
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .pagination {
    margin-top: 1rem;
  }
</style>

<script>
  export default {
    data () {
      return {
        items: [],
        page_size: 25,
        total_items: 0,
        page: 1,
        page_count: 0,
        loading: true
      }
    },
    props: ['title', 'resourceUri', 'resourceName', 'params'],
    methods: {
      fetchData () {
        let vm = this
        let params = {
          page: this.page,
          ...vm.params
        }
        console.dir(params)
        this.$http.get(vm.resourceUri, {
          params: params
        }).then((response) => {
          response.json().then((response) => {
            if (response.detail) {
              eval('vm.items = response.detail')
              vm.$emit('fetched', vm.items)
            } else {
              eval('vm.items = response._embedded.' + vm.resourceName)
              this.page_size = response.page_size
              this.total_items = response.total_items
              this.page = response.page < 1 ? 1 : response.page
              this.page_count = response.page_count || 0
              vm.$emit('fetched', vm.items)
            }
            vm.loading = false
          })
        }).catch((response) => {
          this.dealWithError(response.status)
        })
      },
      handleCurrentPageChange (val) {
        this.page = parseInt(val)
        if (this.total_items > 0) {
          this.fetchData()
        }
      },
      back () {
        this.$router.go(-1)
      }
    },
    dealWithError (status) {
      let message = status + ': '
      switch (status) {
        case 400:
          message += '参数错误'
          break
        case 401:
          message += '未登陆'
          break
        case 403:
          message += '拒绝访问'
          break
        case 404:
          message += '资源不存在'
          break
        case 409:
          message += '资源冲突'
          break
        case 500:
          message += '服务器错误'
          break
        case 502:
          message += '服务器无响应'
          break
        case 503:
          message += '服务器过载'
          break
        default:
          message += '网络错误'
      }

      this.$message(message)
      this.loading = false
    },
    created () {
      this.fetchData()
    },
    watch: {
      params: function (params) {
        this.fetchData()
      }
    }
  }
</script>
